import React, { useState, useEffect, useCallback } from 'react'
import {getAccRuleStartRule, postAccRuleFindRule, getAccRuleDeleteRule} from '../financialApi'
import SelectModule from './components/SelectModule'
import AddFinanceRule from './components/AddFinanceRule'
import { FinanceApprovalSetAll } from './style'
import { Button, message, PageHeader, Spin, Table, Space, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

/**
 * @description: 财务审批设置
 * @author: xiaoxujs
 * @audata: xiaoxujs（2021-07-12）
 */

const FinanceApprovalSet = () => {
    const [spinning, setSpinning] = useState(true)
    const [listData, setListData] = useState([])
    const [total, setTotal] = useState(0)
    const [currentPage, setCurrentPage] = useState(1)
    const [size, setSize] = useState(10)
    const [selectData, setSelectData] = useState({})
    const [addFinanceRuleShow, setAddFinanceRuleShow] = useState(false)
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            ;(async () => {
                const {code, msg, data} = await postAccRuleFindRule(parames)
                if(code === '20000') {
                    setListData(data.records)
                    setTotal(data.total)
                    setCurrentPage(parames.currentPage)
                    setSize(parames.size)
                    setSpinning(false)
                }else{
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        listFun()
    }, [listFun])
    //开启
    const handleOpen = (id) => {
        const parames = {
            ruleId: id
        }
        confirm({
            title: '确定要取用当前规则吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                ;(async () => {
                    const {code, msg} = await getAccRuleStartRule(parames)
                    if(code === '20000') {
                        message.success('启用成功')
                        listFun()
                    }else{
                        message.error(msg)
                    }
                })()
            }
          });

    }

    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${total}条`,
        //每页条数
        pageSize: size,
        //当前页数
        current: currentPage,
        //数据总数
        total: total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun,
            ...selectData
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size,
            ...selectData
        }
        listFun(parames);
    }
    //搜索组件的 确定
    const handleSelectModuleOk = (values) => {
        setSelectData(values)
        const parames = {
            currentPage,
            size,
            ...values
        }
        listFun(parames);
    }
    //搜索组件的 重置
    const handleSelectModuleReset= () => {
        listFun();
        setSelectData({})
    }
    //添加财务审批规则fun
    const handleAddFinanceRule = () => {
        setAddFinanceRuleShow(true)
    }
    //删除
    const handleDelete = id => {
        confirm({
            title: '你确定要删除当前规则吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                ;(async () => {
                    const {code, msg} = await getAccRuleDeleteRule({ruleId: id})
                    if(code === '20000') {
                        message.success('删除成功！')
                        const parames = {
                            currentPage,
                            size,
                            ...selectData
                        }
                        listFun(parames);
                    }else{
                        message.error(msg)
                    }
                })()
            }
          });

    }
    const columns = [
        {
            title: '规则名称',
            dataIndex: 'ruleName'
        },
        {
            title: '初级审批人',
            dataIndex: 'elementary'
        },
        {
            title: '终极审批人',
            dataIndex: 'ultimately'
        },
        {
            title: '最终审批人执行条件(审批金额)',
            dataIndex: 'condition'
        },
        {
            title: '规则状态',
            dataIndex: 'state',
            render: text => <span>
            {
                text === 1 ? "开启" : '禁用'
            }
        </span>
        },
        {
            title: '操作',
            render: (text, recode) => <Space>
                <Button type = 'primary' onClick = {() => handleOpen(recode.id)}>
                    启用
                </Button>
                <Button type = 'primary' danger onClick = {() => handleDelete(recode.id)}>
                    删除
                </Button>
            </Space>
        },
    ]
    return <FinanceApprovalSetAll>
        <PageHeader
            className="site-page-header"
            title="财务审批设置列表"
            extra={[
                <Button key='1' type='primary' onClick={() => handleAddFinanceRule()}>创建财务审批规则</Button>
            ]}
        />
        <SelectModule handleSelectModuleOk = {handleSelectModuleOk} handleSelectModuleReset = {handleSelectModuleReset} />
        <Spin spinning={spinning} tip="Loading...">
            <Table dataSource={listData} columns={columns} pagination = {pagination} rowKey = 'id' />
        </Spin>
        <AddFinanceRule addFinanceRuleShow = {addFinanceRuleShow} setAddFinanceRuleShow = {setAddFinanceRuleShow} listFun = {listFun} />
    </FinanceApprovalSetAll>
}

export default FinanceApprovalSet;